<template>
  <div>
    <div class="body">
      <t-card bordered :title="form.user_name">
        <t-form
          colon
          preventSubmitDefault
          labelAlign="left"
          id="selectForm"
          :data="form"
        >
          <t-form-item label="真实姓名">
            <span>{{ form.real_name }}</span>
          </t-form-item>
          <t-form-item label="年龄">
            <span>{{ form.age }}</span>
          </t-form-item>
          <t-form-item label="性别">
            <span>{{ form.sex }}</span>
          </t-form-item>
          <t-form-item label="电话">
            <span>{{ form.phone }}</span>
          </t-form-item>
          <t-form-item label="邮箱">
            <span>{{ form.mail }}</span>
          </t-form-item>
        </t-form>
      </t-card>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.getdata();
  },
  data() {
    return {
      form: {
        real_name: "",
        sex: "",
        age: "",
        mail: "",
        phone: "",
        user_name: "",
      },
    };
  },
  methods: {
    getdata() {
      this.$axios.get("/api/user/usermsg").then((res) => {
        console.log(res.data);
        if (res.data.status == 200) {
          this.form.age = res.data.data.age;
          this.form.mail = res.data.data.mail;
          this.form.phone = res.data.data.phone;
          this.form.real_name = res.data.data.real_name;
          this.form.sex = res.data.data.sex;
          this.form.user_name = res.data.data.user_name;
        }
      });
    },
  },
};
</script>

<style scoped>
.header {
  width: 100%;
  height: 10%;
  text-align: center;
  line-height: 64px;
  font-size: 20px;
  font-weight: 800;
  border-bottom: 1px solid #e3e3e3;
}

.body {
  width: 40%;
  margin-top: 30px;
  margin-left: 30px;
}

span {
  font-size: 18px;
}
</style>
<style>
.t-card__title {
  font-size: 26px;
}
</style>
